import {
	getImgInfo
} from "@/utils/tool.js"

export const mixin = {
	data() {
		return {
			bgWidth: 750, // 背景图片
			bgHeight: 0, // 背景图片
			modelWidth: 420,
			modelHeight: 540,
			iconWidth: 0,
			iconHeight: 0,
			markers: [{
					id: 1,
					date: "2024-01-08",
					x: 300,
					y: 950,
					show: false
				},
				{
					id: 2,
					date: "2024-02-03",
					x: 200,
					y: 0,
					show: false
				},
				{
					id: 3,
					date: "2024-03-18",
					x: 600,
					y: 0,
					show: false
				},
				{
					id: 4,
					date: "2024-04-28",
					x: 600,
					y: 1280,
					show: false
				},
				{
					id: 5,
					date: "2024-05-12",
					x: 200,
					y: 300,
					show: false
				},
				{
					id: 6,
					date: "2024-06-21",
					x: 400,
					y: 600,
					show: false
				},
				{
					id: 7,
					date: "2024-06-21",
					x: 600,
					y: 600,
					show: false
				},
				{
					id: 8,
					date: "2024-06-21",
					x: 100,
					y: 600,
					show: false
				},
				{
					id: 9,
					date: "2024-06-21",
					x: 200,
					y: 700,
					show: false
				},
				{
					id: 10,
					date: "2024-06-21",
					x: 200,
					y: 1300,
					show: false
				}
			]
		}
	},
	computed: {
		// 计算气泡弹框位置
		// top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
		calculateLocation() {
			return (x, y) => {
				let placement = "";

				let rangeX = (this.bgWidth - this.modelWidth) / 2;
				let startXRange = [0, rangeX];
				let endXRange = [rangeX + this.modelWidth, this.bgWidth];

				let rangeY = (this.bgHeight - this.modelHeight) / 2;
				let startYRange = [0, rangeY];
				let endYRange = [rangeY + this.modelHeight, this.bgHeight];

				// 判断向左
				if ((x + this.modelWidth) >= this.bgWidth) {
					// 判断左上
					if (y <= rangeY) {
						placement = "left-start";
					}
					// 判断左下
					else if (y >= endYRange[0]) {
						placement = "left-end";
					}
					// 左中
					else {
						placement = "left";
					}
				}
				// 判断向右
				else if (x <= rangeX) {
					// 判断右上
					if (y <= rangeY) {
						placement = "right-start";
					}
					// 判断右下
					else if (y >= endYRange[0]) {
						placement = "right-end";
					}
					// 右中
					else {
						placement = "right";
					}
				}
				// 判断向上
				else if ((y + this.modelHeight) >= this.bgHeight) {
					// 判断上左
					if (x <= rangeX) {
						placement = "top-start";
					}
					// 判断上右
					else if (x >= endXRange[0]) {
						placement = "top-end";
					}
					// 上中
					else {
						placement = "top";
					}
				}
				// 判断向下
				else if (y <= rangeY) {
					// 判断下左
					if (x <= rangeX) {
						placement = "bottom-start";
					}
					// 判断下右
					else if (x >= endXRange[0]) {
						placement = "bottom-end";
					}
					// 下中
					else {
						placement = "bottom";
					}
				} else {
					if ((x + this.modelWidth) > this.bgWidth) {
						if (y + this.modelHeight <= this.bgHeight) {
							placement = "bottom";
						} else {
							placement = "top";
						}
					} else if (x < 0) {
						if (y + this.modelHeight <= this.bgHeight) {
							placement = "bottom";
						} else {
							placement = "top";
						}
					}
					if (!placement) {
						placement = (y < this.bgHeight / 2) ? "bottom" : "top";
					}
				}

				if (placement === "left" && (x - this.modelWidth < 0)) {
					placement = "bottom";
				}
				if (placement === "right" && (x + this.modelWidth > this.bgWidth)) {
					placement = "bottom";
				}

				console.log("placement--->", placement);
				return placement;

			}
		}
	},
	methods: {
		initImg() {
			getImgInfo("../../static/bg.png", (res) => {
				this.bgHeight = res.height
			})
			getImgInfo("../../static/icon.png", (res) => {
				this.iconWidth = res.width
				this.iconHeight = res.height
			})
		}
	}
}